<template>
  <div v-loading="isLoading"
       class="container">
    <el-card :key="isKey">
      <template #header>
        <div class="table_tool">
          <el-button type="success"
                     @click="exportExcel">导出报名报表</el-button>
        </div>
      </template>
      <el-table id="out-table"
                :data="tableData"
                border
                strip>
        <el-table-column prop="venv_name"
                         label="预约场馆名称" />
        <el-table-column prop="venv_type_name"
                         label="场馆类型" />
        <el-table-column prop="user_name"
                         label="实名信息" />
        <el-table-column prop="venv_addr"
                         label="场馆地址" />
        <el-table-column prop="date"
                         label="预约入场日期" />
        <el-table-column prop="venv_time_start_time"
                         label="预约入场时间">
          <template slot-scope="{ row }">
            {{ row.venv_time_start_time }}~{{ row.venv_time_end_time }}
          </template>
        </el-table-column>
        <el-table-column prop="qr_img"
                         label="核销二维码">
          <template slot-scope="{ row }">
            <el-image style="width: 150px; height: auto"
                      :src="row.qr_img"
                      :preview-src-list="[row.qr_img]" />
          </template>
        </el-table-column>
        <el-table-column prop="status"
                         label="订单状态">
          <template slot-scope="{ row }">
            {{ statusText[row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="repair_time"
                         label="核销时间">
          <template slot-scope="{ row }">
            {{ row.status==1?row.repair_time:'未核销' }}
          </template>
        </el-table-column>
        <el-table-column prop="admin_user_name"
                         label="核销人">
          <template slot-scope="{ row }">
            {{ row.status==1?row.admin_user_name:'未核销' }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination background
                     layout="total, sizes, pager, jumper"
                     :current-page="searchForm.page"
                     :page-sizes="[10, 20, 30, 50, 100]"
                     :page-size="searchForm.page_size"
                     :total="tableTotal"
                     @size-change="changeSize"
                     @current-change="changeCurrent" />
    </footer>
  </div>
</template>

<script>
import API from '@/api'
import FileSaver from 'file-saver'
import * as XLSX from 'xlsx'
import { table, addOrEdit } from '@/utils/mixins'
export default {
  mixins: [table, addOrEdit],

  data: () => ({
    communityId: '', // 社区活动id
    isLoading: true,
    tableData: [],
    tableTotal: 0,
    isKey: false,
    searchForm: {
      page: 1, // 当前页码
      per_page: 10 // 每页条数
    },
    statusText: ['未核销', '已核销', '订单过期']
  }),

  created () {
    this.getList()
  },

  methods: {
    // 获取列表
    getList () {
      this.isLoading = true
      API.getVenueOrderList(this.searchForm).then(({ data }) => {
        data.items.forEach(item => {
          item.status = parseInt(item.status)
        })
        this.tableData = data.items
        this.tableTotal = data.total
      }).catch(() => {
        this.tableData = []
        this.tableTotal = 0
      }).finally(() => {
        this.isLoading = false
      })
    },

    // 分页
    changeSize (val) {
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent (val) {
      this.searchForm.page = val
      this.getList()
    },

    exportExcel () {
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: 'application/octet-stream' }),
          `场馆核销列表.xlsx`
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
